<template>
    <div class="warp-main">
        <el-row v-loading="loading" element-loading-text="拼命加载中">
			<el-col :span="24" class="toolbar">
				<el-form :inline="true" :model="filters">
					<el-form-item>
						<el-input
							v-model="filters.search"
							placeholder="请输入专家姓名或者手机号"
							auto-complete="off"
							@keyup.enter.native="handleSearch"
						></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" size="medium" @click="handleSearch">查询</el-button>
					</el-form-item>					
				</el-form>
			</el-col>
			<!--表格数据-->
			<el-col class="table-wrapper">
				<el-table :data="tableData" stripe style="width: 100%" @row-click="handleDetail">
					<el-table-column prop="specialist_id" v-if="idShow" label="专家ID"></el-table-column>
					<el-table-column prop="specialist_id" label="专家ID" sortable></el-table-column>
					<el-table-column prop="specialist_name" label="专家帐号"></el-table-column>
					<el-table-column prop="specialist_realname" label="专家姓名" show-overflow-tooltip></el-table-column>
					<el-table-column prop="professional_title" label="职称"></el-table-column>
					<el-table-column prop="specialist_contact" label="联系方式"></el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button
								type="text"
								icon="el-icon-delete"
								class="red"
								@click="handleDelete(scope.$index, scope.row)">
								删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
			<el-col :span="24" class="toolbar">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[5, 10, 20, 50]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</el-col>
		</el-row>
    </div>
</template>

<script>
export default {
	name: "mission",
	data() {
		return {
			loading: false,
			idShow: false,
			total: 2,   //数据条数总数
			currentPage: 1,  //当前页码
			pageSize: 5,   //每个页面默认显示数据条数
			tableData: [
				{
					specialist_id: 1,
					specialist_name: "zhangsan",
					specialist_realname: "张三",
					professional_title: "教授",
					specialist_contact: "13755556666"
				},
				{
					specialist_id: 2,
					specialist_name: "lisi",
					specialist_realname: "李四",
					professional_title: "教授",
					specialist_contact: "13588887777"
				}
			],
			addVisible: false, // 添加弹窗flag
			detailVisible: false, // 详情弹窗flag
			maskVisible: false, // 弹窗mask显示
			detailId: 0, // 详情ID，数据的主键id
			filters: {
				// 搜索表单
				search: ""
			}
		};
	},
	components: {},
	async mounted() {
		//初始化
		console.log("初始化");
		var data=await this.$http.post('/getspecialuserlist',{currentPage:this.currentPage,pageSize:this.pageSize});
		this.total = data.data.counts;
		var speciallist=data.data.speciallist;
		
		console.log(this.total);		
		this.tableData = speciallist;
	},
	methods: {
		// 搜索
		async handleSearch() {
			this.currentPage=1;
			await this.getDatabySearchHandlder(this.filters.search,this.currentPage,this.pageSize);
		},
		async getDatabySearchHandlder(searchString,currentPage,pageSize){
			console.log("search");
			var data = await this.$http.post('/getspecialuserlistbysearch',{search:searchString,currentPage:currentPage,pageSize:pageSize});
			this.total = data.data.counts;
			var speciallist=data.data.speciallist;
			console.log(data.state);
			this.tableData = speciallist;
		},
		// 详情
		handleDetail(row, event, column) {
			this.detailId = row.mId;
			this.maskVisible = true;
			this.detailVisible = true;
		},
		// 删除
		async handleDelete(index, row) {
			if(confirm('确定要删除吗')==true){
				var data=await this.$http.post('/deletespecialuser',JSON.stringify(row.specialist_id));
				console.log(row.specialist_id);
				if(data.state=200){
				 	confirm('删除成功')
				}
			}
		},
		handleEdit(index, row){
			console.log(index, row);
		},
		// 选择每页显示条数
		async handleSizeChange(val) {
			this.pageSize = val;
			console.log("pageSize:"+this.pageSize)
			await this.getPageDataHandler(this.currentPage,this.pageSize);
		},
		// 跳转页 加载数据
		async handleCurrentChange(val) {
			this.currentPage = val;
			console.log("currentPage:"+this.currentPage)
			//判断搜索内容是否为空，根据条件选择查询的后端方法
			if(this.filters.search==null||this.filters.search==""){
				await this.getPageDataHandler(this.currentPage,this.pageSize);
			}else{
				await this.getDatabySearchHandlder(this.filters.search,this.currentPage,this.pageSize);
			}			
		},
		async getPageDataHandler(currentPage,pageSize){
			var data = await this.$http.post('/getspecialuserlist',{currentPage:currentPage,pageSize:pageSize});
		    this.total = data.data.counts;
		    var speciallist=data.data.speciallist;
			this.tableData = speciallist;
		},
		// 添加弹窗
		showAddDialog() {
			this.addVisible = true;
		},
		// 关闭所有弹窗
		cancelVisible() {
			this.maskVisible = false;
			this.detailVisible = false;
		},
		// 创建日期转换
		dateFormatter(row, column) {
			return this.getDateValue(row.createTime);
		},
		// 执行日期转换
		activeTateFormatter(row, column) {
			return this.getDateValue(row.updateTime);
		},
		// 获取日期
		getDateValue(datetime) {
			if (datetime) {
				datetime = new Date(datetime);
				let y = datetime.getFullYear() + "-";
				let mon = datetime.getMonth() + 1 + "-";
				let d = datetime.getDate();
				return y + mon + d;
			}
			return "";
		}
	}
};
</script>